<%@ page import="io.github.zhibaibubai.blog.MyDBUtil" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="io.github.zhibaibubai.blog.util.Website" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>

<%
    ArrayList<Website> list = new ArrayList<>();
    String sql = "select url, og_title, og_description, og_image from website order by id;";
    Connection connection = MyDBUtil.getConnection();
    try (
            PreparedStatement preparedStatement = connection.prepareStatement(sql);
            ResultSet rs = preparedStatement.executeQuery();
    ) {
        while (rs.next()) {
            String url = rs.getString("url");
            String ogTitle = rs.getString("og_title");
            String ogDescription = rs.getString("og_description");
            String ogImage = rs.getString("og_image");
            Website website = new Website(url, ogTitle, ogDescription, ogImage);
            list.add(website);
        }
    }
    request.setAttribute("websites", list);
%>

<%@ include file="/WEB-INF/partials/_start.jsp" %>

<link rel="stylesheet" href="css/index.css">

<!-- 头部 -->
<header class="header">
    <h1 class="display-3 fw-bold text-center mb-3">优秀如你</h1>
    <div class="scroll-hint">👇 向下滚动查看内容</div>
</header>

<!-- 卡片容器 -->
<div class="cards-container">
    <c:forEach items="${websites}" var="site" varStatus="status">
    <div class="card-wrapper">
        <div class="card">
            <div class="card-header">
                <div class="profile-section">
                    <div class="content">
                        <h2 class="card-title"><a href="${site.url}" target="_blank">${site.ogTitle}</a></h2>
                        <p class="card-text">${site.ogDescription}</p>
                        </div>
                    <img src="${site.ogImage == null ? 'http://120.24.69.59/avatar.png' : site.ogImage}" class="avatar rounded-3" width="68" height="68" alt="${site.ogTitle}" loading="lazy">
                </div>
            </div>
            <div class="iframe-wrapper">
                <div class="preview-controls">
                    <span>预览</span>
                    <div class="url">${site.url}</div>
                    <a href="${site.url}" target="_blank">新窗口查看</a>
                    </div>
                <iframe src="about:blank" class="preview-frame" title="Le's website" loading="lazy"></iframe>
            </div>
        </div>
    </div>
    </c:forEach>
</div>

<script>
    const observerOptions = {
        root: null,
        rootMargin: '-10%',
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('show');

                // 当卡片出现在视图中时加载 iframe
                const iframe = entry.target.querySelector('iframe');
                if (iframe && iframe.src === 'about:blank') {
                    // 这里替换为实际的URL
                    iframe.src = iframe.parentElement.querySelector('.url').textContent;
                }
            }
        });
    }, observerOptions);

    document.querySelectorAll('.card-wrapper').forEach(el => {
        observer.observe(el);
    });
</script>

<%@ include file="/WEB-INF/partials/_end.jsp" %>